<template>
  <div class="task-listener-form">
    <a-form
      ref="formRef"
      :model="listener"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      style="margin-top: 6px"
    >
      <a-form-item name="event" label="事件" :rules="[{ required: true, message: '请选择事件' }]">
        <a-radio-group v-model:value="listener.event">
          <a-radio-button value="assignment">指派</a-radio-button>
          <a-radio-button value="create">创建</a-radio-button>
          <a-radio-button value="complete">完成</a-radio-button>
          <a-radio-button value="delete">删除</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item name="type" label="类型" :rules="[{ required: true, message: '请选择类型' }]">
        <a-radio-group v-model:value="listener.type">
          <a-radio-button value="class">Java类</a-radio-button>
          <a-radio-button value="expression">表达式</a-radio-button>
          <a-radio-button value="delegateExpression" disabled>委托表达式</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item name="value" label="值" :rules="[{ required: true, message: '请输入值' }]">
        <a-input v-model:value="listener.value" />
      </a-form-item>
      <div v-if="listener.type === 'class'" style="width: 100%; height: 200px">
        <listener-field-inject ref="fieldRef" v-bind="$props" />
      </div>
    </a-form>
  </div>
</template>

<script setup>
import { ref } from "vue"
import ListenerFieldInject from "/@/components/bpmn/form/ListenerFieldInject.vue"

const props = defineProps({
  listener: {
    type: Object,
    required: true
  }
})

const formRef = ref()
const fieldRef = ref()

async function validate() {
  await fieldRef.value?.validate()
  await formRef.value?.validate()
}

defineExpose({
  validate
})

// https://l1yp.com/docs/flowable/bpmn/#executionListeners
</script>

<style scoped>
.task-listener-form {
  height: 400px;
  overflow-y: auto;
}
:deep(.listener-field-table.vxe-table--render-default .vxe-header--column:not(.col--ellipsis)) {
  padding: 0;
}
</style>
